<template>
  <div class="login-container">
    <img src="@/assets/login/bg.png" alt="" class="wave" />
    <div class="container">
      <div class="img">
        <img src="@/assets/login/img-3.svg" alt="" />
      </div>
      <div class="login-box">
        <form action="">
          <img src="@/assets/login/avatar.svg" alt="" class="avatar" />
          <h2>浪花极速云</h2>
          <div id="username" class="input-group">
            <span class="svg-container">
              <svg-icon icon-class="user" />
            </span>
            <div>
              <h5>账号</h5>
              <input
                v-model="loginForm.username"
                tabindex="1"
                type="text"
                class="input"
              />
            </div>
          </div>
          <div id="password" class="input-group">
            <span class="svg-container">
              <svg-icon icon-class="password" />
            </span>
            <div>
              <h5>密码</h5>
              <input
                v-model="loginForm.password"
                type="password"
                tabindex="2"
                class="input"
              />
            </div>
          </div>
          <a href="#">忘记密码</a>
          <!-- 提交表单 -->
          <el-button
            class="btn"
            :loading="loading"
            tabindex="3"
            size="medium"
            type="primary"
            @click="handleLogin"
          >
            登录
          </el-button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loading: false,
      passwordType: "password",
      loginForm: {
        grant_type: "password",
        username: "",
        password: "",
      },
    };
  },
  mounted() {
    this.addEventHandler();
  },
  methods: {
    shake(elemId) {
      let elem = document.getElementById(elemId);
      if (elem) {
        elem.classList.add("shake");
        setTimeout(() => {
          elem.classList.remove("shake");
        }, 800);
      }
    },
    check() {
      if (this.loginForm.username === "") {
        this.shake("username");
        return false;
      }
      if (this.loginForm.password === "") {
        this.shake("password");
        return false;
      }
      return true;
    },
    addEventHandler() {
      const inputs = document.querySelectorAll(".input");

      function focusFunction() {
        let parentNode = this.parentNode.parentNode;
        parentNode.classList.add("focus");
      }
      function blurFunction() {
        let parentNode = this.parentNode.parentNode;
        if (this.value == "") {
          parentNode.classList.remove("focus");
        }
      }

      inputs.forEach((input) => {
        input.addEventListener("focus", focusFunction);
        input.addEventListener("blur", blurFunction);
      });
    },
    async handleLogin() {
      if (this.check()) {
        this.loading = true;
        try {
          // 调用后端接口进行登录, 状态保存到vuex中
          await this.$store.dispatch("user/login", this.loginForm);

          // 调用后端接口获取用户profile, 状态保存到vuex中
          const user = await this.$store.dispatch("user/getInfo");
          console.log(user);
        } catch (error) {
          console.log(error);
          return;
        } finally {
          this.loading = false;
        }

        // 登陆成功, 重定向到Home或者用户指定的URL
        this.$router.push({
          path: this.$route.query.redirect || "/",
          query: this.otherQuery,
        });
      }
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
